import React, { Component } from 'react';
import { connect } from 'dva';
import { Card, Table, Divider, Button } from 'antd';
import DescriptionList from '@/components/DescriptionList';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';

const { Description } = DescriptionList;

@connect(({ detexport: { detail }, loading }) => ({
  declDetailCols: detail.declDetailCols,
  declDetailVo: detail.declDetailVo,
  loading: loading.effects['detexport/fetchDetail'],
}))
class BasicProfile extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    const {
      dispatch,
      location: { query },
    } = this.props;
    const { declDetailId } = query;
    dispatch({
      type: 'detexport/fetchDetail',
      payload: { declDetailId },
    });
  }

  render() {
    const { declDetailCols, declDetailVo, loading } = this.props;
    const columns = [
      {
        title: '字段名称',
        dataIndex: 'colName',
        key: 'colName',
      },
      {
        title: '自定义名称',
        dataIndex: 'colCustomName',
        key: 'colCustomName',
      },
    ];
    return (
      <PageHeaderWrapper>
        <Card title="申报明细表详情">
          <DescriptionList size="large" style={{ marginBottom: 24 }}>
            <Description term="名称">{declDetailVo.declDetailName}</Description>
            <Description term="执行地">{declDetailVo.areaName}</Description>
            <Description term="备注">{declDetailVo.remark || '--'}</Description>
            <Divider style={{ marginBottom: 24 }} />
            <Description term="产品">{declDetailVo.assName}</Description>
            <Description term="类型">
              {`${declDetailVo.type === 1 ? '增员' : '减员'}${
                declDetailVo.subTypeName ? `-${declDetailVo.subTypeName}` : ''
              }`}
            </Description>
            <Description term="参保类型">{declDetailVo.subTypeName || '--'}</Description>
          </DescriptionList>
          <Table
            style={{ marginBottom: 24, width: 400 }}
            pagination={false}
            loading={loading}
            dataSource={declDetailCols}
            columns={columns}
            rowKey="matId"
          />
        </Card>
        <FooterToolbar style={{ width: '100%' }}>
          <Button type="primary" onClick={() => window.history.back()}>
            返回
          </Button>
        </FooterToolbar>
      </PageHeaderWrapper>
    );
  }
}

export default BasicProfile;
